<template>
    <div class="app-container ex_model_place">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 17px;font-weight: bold;">考场{{ index + 1 }}</span>
                <el-button style="float: right; padding: 3px 0;" type="text" size="medium"  icon="el-icon-circle-close" @click="handleDelete"/>
            </div>
            <el-form label-width="42px">
                <el-form-item label="科室" prop="deptId">
                    <treeselect v-model="place.deptId" :options="deptOptions" :defaultExpandLevel="Infinity" :show-count="true" clearable placeholder="请选择科室"/>
                </el-form-item>
                <el-form-item label="技能" prop="skillId">
                    <el-select v-model="place.skillId" placeholder="请选择技能" size="small" clearable style="width: 213px">
                        <el-option v-for="item in skillList" :key="item.id" :value="item.id" :label="item.name + '(' + (item.exDuration/60) + ')'"/>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import {listSkill} from "@/api/score/skill";
import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {isNotNull} from "@/utils/zzDouUtils/objUtil";


export default {
    name: "ex_model_place",
    components: {Treeselect},
    props: {
        place: {
            type: Object
        },
        index: {
            type: Number
        },
        deptOptions:{  // 科室树选项
            type: Array,
            default: []
        }
    },
    watch: {
        'place.deptId'(n, o) {
            this.getSkillList(n);
        }
    },
    data() {
        return {
            deptList: [],
            skillList: [],
            defaultProps: {
                children: "children",
                label: "label"
            },
        };
    },
    created() {
        this.getSkillList(this.place.deptId);
    },
    methods: {
        /** 查询技能管理列表 */
        getSkillList(deptId) {
            if (isNotNull(deptId)) {
                listSkill({pageSize: 1000, pageNum: 1, deptId: deptId}).then(response => {
                    this.skillList = response.rows;
                });
            }
        },
        /** 删除 */
        handleDelete() {
            this.$emit("handleDeleteScoreExModelPlace", this.index);
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
};
</script>
<style>
.ex_model_place .box-card { /* 单个卡片 */
    width: 300px;
    height: 300px;
    max-height: 600px;
    margin-right: 5px;
    padding: 0;
}

.ex_model_place .el-card{
    margin: 10px;
    border-radius: 15px;
    border-color: #C0C4CC;
}
.ex_model_place .el-card__header{
    background: #E6FEEE;
}
.ex_model_place .el-card__body{
    height: 100%;
    background: #F5FEF2;
}


.ex_model_place .vue-treeselect {
    width: 203px;
    height: 28px;
}

.ex_model_place .vue-treeselect__menu {
    overflow-x: scroll !important;
    width: 250px;
    max-height: 180px !important;
}

.ex_model_place .vue-treeselect__label {
    overflow: unset;
    text-overflow: unset;
}

.ex_model_place .vue-treeselect__control {
    height: 20px !important;
}

.ex_model_place .vue-treeselect__multi-value-item-container, .vue-treeselect--has-value .vue-treeselect__multi-value {
    height: 30px;
    line-height: 24px;
    padding: 0;
}

.ex_model_place .vue-treeselect__limit-tip, .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
    padding-top: 0;
}

.ex_model_place .vue-treeselect--has-value .vue-treeselect__multi-value {


}

.ex_model_place .vue-treeselect__placeholder, .vue-treeselect__single-value {
    height: 28px;
    line-height: 32px;
    font-size: small;
}

.ex_model_place .vue-treeselect--has-value .vue-treeselect__input {
    height: 18px !important;
    line-height: 18px !important;
}

.ex_model_place .vue-treeselect div, .vue-treeselect span {
    box-sizing: content-box;
}

.ex_model_place .vue-treeselect__multi-value-label {
    display: block;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ex_model_place .vue-treeselect__value-container {
    display: block;
    height: 32px;
}
</style>
